<template>
    <div>
        <h3>路由配置</h3>
        <pre>
        通过修改 vue-router 的options 配置项完成 组件和路由关联
        使用 Vue.use(Router) 状态的 全局组件完成 路由组件的显示 和 切换

        router/index.js
        <code>
        import Vue from 'vue'
        import Router from 'vue-router';
        //   为项目安装 路由功能
        //         + 全局混入具有路由配置解析的 beforeCreate 生命周期
        //         + 增加全局组件 ＜router-view＞＜/router-view＞  ＜RouterView＞＜/RouterView＞
        //              基于 ＜compoent＞＜/compoent＞动态组件完成二次封装的组件
        //              保留了动态组件技术的相关功能，增加了URL地址解析的 地址对应组件的寻找和加载操作
        //         + 增加全局组件 ＜router-link＞＜/router-link＞  ＜RouterLink＞＜/RouterLink＞
        //              自定义的组件地址切换标签，通过为该组件提供 to 属性描述的方式，
        //              表示被点击时需要切换URL 组件路由地址
        //              该组件带有默认分发功能
        //              !! 该组件默认以 ＜a＞ 标签作为渲染目标标签
        //              !! 通过 定义属性 tag="标签名" 改变该组件的渲染标签类型
        Vue.use(Router)

        // 2、基于路由构造函数创建路由实例对象
        // const route = new Router(options);
        /*
            options 通过取值 对象方式，描述当前项目中路由功能
                {
                    // 路由表
                    // 描述组件和地址的关系 ==> 当URL地址变换后，vue知道该地址应该渲染那个组件 
                    // 路由中定义的组件 以及被路由进行统一管理，不需要在使用页面中定义为局部组件
                    routes:[
                        // 一个组件的 路由地址的相关详细描述
                        { 
                             path:"定义组件地址"，
                                + 基本地址定义：
                                    通过配置path属性描述组件和地址关系，
                                    一级路由定义时必须使用/开头（在new Router 的 routes 中配置的路由组件），
                                    子级路由可选择绝对路径或相对路径
                                + 默认地址定义
                                    vue路由默认展示是地址为 / 的组件，因此以path:"/"描述默认组件
                                    默认地址一般使用路由定向方式跳转到其它组件上：{path:"/"，redirect："目标地址"}
                                + 通配地址定义
                                    对没有在路由表中定义的路径，vue会进行统一的地址处理
                                    通过配置path通配符 *，描述路由表中不存在的地址默认访问的组件
                                    {path:"*"，redirect："目标地址"} 
                                    {path:"*"，component：组件}

                            name:"路由别名"
                            component："定义组件",
                            redirect："目标地址",
                                描述目标路由地址的配置,当前用户访问某个地址时，可以通过该属性自动进行地址切换
                            meta:"定义自定义数据",
                            children:"定义子路由"
                                为当前组件构建子级路由配置
                                该属性的取值和 routes 的配置一样
                                在子路由配置时，path取值的前缀可以包含/ 也可以没有 /
                                    + 包含 / 表示访问该子路由时，隐藏父路由地址
                                    + 不包含 / 表示访问子路由时，子路由地址在父路由地址之后进行拼接
                        }
                    ]
                }

        */
        import DefaultPage from "@/view/DefaultPage";
        const router = new Router({
            // 第一层路由配置-一级路由
            routes:[
                { 
                    // 定义当前组件的对应URL地址
                    path:"/default",
                    // 定义当前URL地址对应的组件文件内容的(.vue导入后返回的组件对象数据)
                    component:DefaultPage
                },
                ……
            ]
        });

        // 3、将路由实例对象进行导出
        export default router;
        </code>

        组件中
        <code>
            ＜div＞
                ＜div class="menus"＞
                    ＜ul＞
                        ＜router-link tag="li" to="/default"＞默认页面＜/router-link＞
                        ……
                    ＜/ul＞
                ＜/div＞
                ＜router-view＞＜/router-view＞
            ＜/div＞
        </code>
        </pre>
        <hr>
        <h3>路由模式切换</h3>
        <pre>
        通过配置 mode 取值，可修改路由模式
        - hash模式 ： 以 html 中 锚点技术实现的 路由匹配切换
            - 锚点 可以更改 url地址的同时 ，不刷新页面的方式实现
            - 通过 window.location.hash 获取 锚点值，通过锚点值 匹配组件，进行渲染展示
        - history 模式 ： 历史地址模式
            - 该模式不能单独使用，必须需要后台通过代码进行 配合使用
            - 将地址转换为正常的 URL地址，使用JS 的URL地址栏 history API 实现页面不刷新组件更新的效
        </pre>
        <pre>
        new Router({
            base:"/dist/",
            mode:"history", // 删除路径中的 # 关键字
            // mode:"hash", // 默认hash模式
            routes:[]
        })
        </pre>
        <h5>hash模式地址栏效果</h5>
        <img src="@/assets/08.png" alt="" srcset="">
        <h5>history模式地址栏效果</h5>
        <img src="@/assets/09.png" alt="" srcset="">
        <hr>
        <h5>当采用history模式，但服务器不做相关配置时</h5>
        <img src="@/assets/10.gif" alt="" srcset="">
    </div>
</template>